<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/leadin.css">
    <title>Document</title>
</head>

<body>
    <ul id="box">
        <li>
            <img src="img/冬奥会.png" alt="">
            <div class="text">冬奥会</div>
        </li>
        <li>
            <img src="img/神州.png" alt="">
            <div class="text">神州十三</div>
        </li>
        <li>
            <img src="img/建军节.png" alt="">
            <div class="text">建军</div>
        </li>
        <li>
            <img src="img/团.png" alt="">
            <div class="text">建团</div>
        </li>
        <li>
            <img src="img/十三大.png" alt="">
            <div class="text">十二大</div>
        </li>
    </ul>
    <div id="icon"><a href="index.html"><span>登录</span></a></div>
    <!-- <div class="icon">
        <a href=""><span>welcome</span></a>
    </div>
    <script>
        const spans = document.querySelectorAll('.icon span');
        spans.forEach(span => {
            span.addEventListener('hover', function (e) {
                let posX = e.pageX - e.target.offsetLeft;
                let posY = e.pageY - e.target.offsetTop;
                const i = document.createElement('i');
                i.style.left = posX + 'px';
                i.style.top = posY + 'px';
                this.appendChild(i);
                setTimeout(() => {
                    this.removeChild(i);
                }, 2000)

            })
        })
    </script> -->

</body>

</html>